<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- production version, optimized for size and speed -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>

</head>

<body>
    <div id="watch-example">
        <p>
            Ask a yes/no question:
            <input v-model="question">
        </p>
        <p>{{ answer }}</p>
    </div>
    <script>
        var watchExampleVM = new Vue({
            el: '#watch-example',
            data: {
                question: '',
                answer: 'I cannot give you an answer until you ask a question!'
            },
            watch: {
                // whenever question changes, this function will run
                question: function (newQuestion, oldQuestion) {
                    this.answer = 'Waiting for you to stop typing...'
                    this.getAnswer()
                }
            },
            methods: {
                // _.debounce is a function provided by lodash to limit how
                // often a particularly expensive operation can be run.
                // In this case, we want to limit how often we access
                // yesno.wtf/api, waiting until the user has completely
                // finished typing before making the ajax request. To learn
                // more about the _.debounce function (and its cousin
                // _.throttle), visit: https://lodash.com/docs#debounce
                getAnswer:_.debounce(
                    function () {
                        if (this.question.indexOf('?') === -1) {
                            this.answer = 'Questions usually contain a question mark. ;-)'
                            return
                        }
                        this.answer = 'Thinking...'
                        var vm = this
                        axios.get('https://yesno.wtf/api')
                            .then(function (response) {
                                vm.answer = _.capitalize(response.data.answer)
                            })
                            .catch(function (error) {
                                vm.answer = 'Error! Could not reach the API. ' + error
                            })
                    },
                    // This is the number of milliseconds we wait for the
                    // user to stop typing.
                    500
                )
            }
        })
    </script>
</body>

</html>